<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="__PUBLIC__/images/favicon.png?v=26838d09a1?v=26838d09a1">
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/js/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/css/admin.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/dt.css"/>
    <title>Title</title>
</head>
<body>

<div style="padding: 20px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
        <legend>工时表单</legend>
    </fieldset>
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="leixing" value="0" title="请假" checked>
                    <input type="radio" name="leixing" value="1" title="加班" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-inline" >
                    <input type="text" name="mytime" lay-verify="required" id="date" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this,festival:true,format: 'YYYY-MM-DD '})">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">人员</label>
                <div class="layui-input-inline">
                    <select name="member" id="memer_id" lay-verify="required">
                        {volist name='memlist' id='vo'}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}

                    </select>
                </div>
            </div>


        </div>
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">时间选择</label>
                <div class="layui-input-inline"   style="width: auto">
                    <input type="radio" checked lay-filter="test" name="basedate" value="0" title="上午">
                    <input type="radio" lay-filter="test" name="basedate" value="1" title="下午" >
                    <input type="radio" lay-filter="test" name="basedate" value="2" title="全天" >
                    <input type="radio" lay-filter="test" name="basedate" value="3" title="自定义" >
                </div>
                <div class="layui-inline layui-hide" id="dur_id">
                    <label class="layui-form-label">范围</label>
                    <div class="layui-input-inline" >
                        <input type="text" name="starttime" id="dates" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this,istime:true,format: 'YYYY-MM-DD hh:mm'})">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" >
                        <input type="text" name="stoptime" id="datee" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this,istime:true,format: 'YYYY-MM-DD hh:mm'})">
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="beizhu" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>



<script type="text/javascript" src="__PUBLIC__/js/plugins/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/jquery/1.9.1/jquery.min.js"></script>
<!--<script type="text/javascript" src="__PUBLIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>-->
<script type="text/javascript" src="__PUBLIC__/js/bootstrap.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/myjs.js"></script>
<script type="text/javascript">
    function defaultlaytime() {
        var laydate = layui.laydate;

        var start = {
            elem: '#dates'
            , format: 'YYYY-MM-DD hh:mm', //日期格式
            min:basedate.val()+' 00:00',
            max: basedate.val()+ ' 23:59:59',
            istime:true
            , istoday: true
            , festival: true //是否显示节日
            , choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };



        var end = {
            elem: '#datee'
            , format: 'YYYY-MM-DD hh:mm' //日期格式
            ,max: basedate.val()+ ' 23:59:59'
            ,istime:true
            , istoday: false
            , festival: true //是否显示节日
            , choose: function (datas) {
                start.min = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        var base = {
            elem: '#date'
            , format: 'YYYY-MM-DD '//日期格式
            , istoday: true
            ,istime:true
            , festival: true //是否显示节日
            , choose: function (datas) {
                start.min=basedate.val()+' 00:00';
            }
        };
        document.getElementById('date').onclick=function () {
            base.elem=this;
            laydate(base);
            start.elem= document.getElementById('dates');
            laydate(start);
        };

//            laydate(start);


//        $('#date').onclick=function () {
//            start.min=basedate.val()+' 00:00';
//            start.max=basedate.val()+ ' 23:59:59';
//            laydate(start);
//            laydate(end);
//        };
//        document.getElementById('dates').onclick = function () {
//            start.elem = this;
//            laydate(start);
//        };
//        document.getElementById('datee').onclick = function () {
//            end.elem = this;
//            laydate(end);
//        };
    }

</script>
<script type="text/javascript">
    var basedate=$('#date');
    var dates=$('#dates');
    var datee=$('#datee');
    $(function () {

        index = parent.layer.getFrameIndex(window.name);


        $('#date').val(new  Date().toLocaleDateString());

        dates.val(basedate.val()+" 08:00");
        datee.val(basedate.val()+" 12:00");


        form.on('radio(test)', function(data){


            switch(data.value){
                case "0":
                dates.val(basedate.val()+" 08:00");
                datee.val(basedate.val()+" 12:00");
                    $('#dur_id').addClass('layui-hide');
                break;
                case "1":
                    dates.val(basedate.val()+" 14:00");
                    datee.val(basedate.val()+" 18:00");
                    $('#dur_id').addClass('layui-hide');
                    break;
                case "2":
                    dates.val(basedate.val()+" 08:00");
                    datee.val(basedate.val()+" 18:00");
                    $('#dur_id').addClass('layui-hide');
                    break;
                case "3":
                    $('#dur_id').removeClass('layui-hide')
            }


        });

        form.on('submit(formDemo)', function(data){

            $.post("{:Url('index/level/postaddlevel')}",data.field,function (result) {
                layer.msg(result.msg, {anim: 1, time: 1500}, function () {
                    if (result.code) {
                        parent.refreshTable();
                        parent.layer.close(index);
                    }


                });
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

//        defaultlaytime();
    })
    
</script>
</body>
</html>